<template>
 <div style="padding: 16px 20px;position: relative;">
    <div style="width: calc(400px);height: 100%;background-color: white;border-radius: 5px;display: inline-block;">
        <div style="width: 100%;padding: 20px 20px;border-bottom: 1px solid rgb(230,230,230);">
            系统设置
        </div>
        <div style="width: 100%;height: calc(100% - 56.76px);overflow-y: scroll;padding: 10px 10px;padding-right: 5px;">
            <div class="right-button" @click="()=>{
                if(selectedItem!=undefined && selectedItem.key==item.key){
                    return;
                }
                selectedItem=item;
                selectedItemKeys=Object.keys(JSON.parse(selectedItem.value));
                selectedItem.value=JSON.parse(selectedItem.value)
            }" v-for="item in settings" v-bind:key="item" :class="selectedKey==item?['right-button-selected']:[]">
              {{ item.explain }}
              <svg width="15" height="15" viewBox="0 0 48 48" fill="currentColor"><path fill-rule="evenodd" clip-rule="evenodd" d="M32.556 24L16.293 7.737a1 1 0 010-1.415l1.414-1.414a1 1 0 011.414 0L36.8 22.586a2 2 0 010 2.828L19.121 43.092a1 1 0 01-1.414 0l-1.414-1.414a1 1 0 010-1.414L32.556 24z" fill="currentColor"/></svg>
          </div>
        </div>
    </div>
    <div style="width: calc(100% - 420px);height: 100%;border-radius: 5px;background-color: white;float: right;display: inline-block;position: relative;">
        <div v-if="selectedItem!=undefined">
            <div style="width: 100%;padding: 20px 20px;border-bottom: 1px solid rgb(230,230,230);">
                {{ selectedItem.explain }}
            </div>
            <div style="width: 100%;height: calc(100% - 56.76px);padding: 20px 20px;overflow-y: scroll;">
            <div v-for="item2 in selectedItemKeys" v-bind:key="item2" style="margin-bottom: 15px;">
                <p>{{ item2 }}</p>
                <a-input v-model="selectedItem['value'][item2]" style="width: 100%;height: 35px;padding: 0 0;border: 0;border-bottom: 1px solid rgb(0,120,215);background-color: white;"></a-input>
            </div>
          <div style="text-align: right;">
            <a-button type="primary" :loading="isSaving" @click="updateItem">保存</a-button>
          </div>
            </div>
        </div>
        
    </div>
 </div>
</template>

<script>
import axios from 'axios';

export default{
  data(){
    return{
      settings:[],
      isGetting:false,
      selectedItem:undefined,
      selectedItemKeys:[],
      isSaving:false,
    }
  },
  mounted(){
    this.getAll();
  },
  methods:{
    updateItem(){
        this.isSaving=true;
        var config = {
   method: 'post',
   url: '/api/v1/system/update?data=' + JSON.stringify({
    key:this.selectedItem.keyName,
    value:JSON.stringify(this.selectedItem.value),
   }),
   headers: { 
      'Accept': '*/*'
   }
};

axios(config)
.then((res) => {
    this.isSaving=false;
   if(res.data.status==1){
    this.$message.success({
        content:res.data.content
    })
   }else{
    this.$message.error({
        content:res.data.content
    })
   }
})
    },
    getAll(){
        this.isGetting=true;
        var config = {
   method: 'get',
   url: '/api/v1/system/getAll',
   headers: { 
      'Accept': '*/*', 
   }
};

axios(config)
.then((res)=> {
    this.isGetting=false;
   if(res.data.status==1){
    this.settings=res.data.results
    //  console.log(Object.keys( JSON.parse(this.settings[0].value)))
   }else{
    this.$message.error({
        content:res.data.content
    })
   }
})
    },
    
  },
  props:{

  },
}
</script>

<style scoped>

.right-button-selected{
    background-color: rgb(242,242,242);
}

.right-button svg{
  position: absolute;
  right: 15px;
  top: 15px;
}

.right-button:hover{
  background-color: rgb(230,230,230);
}

.right-button{
  width: 100%;
  padding: 15px 15px;
  border-radius: 5px;
  cursor: pointer;
  line-height: 15px;
  position: relative;
  margin-bottom: 5px;
}

</style>